const path = require("path")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
// const { compilation } = require("webpack")

class MyPlugin {
    apply(compiler) {
        console.log("my plugin 启动")
        compiler.hooks.emit.tap("MyPlugin", compilation => {
            // compilation 可以理解为此次打包的上下文
            const obj = compilation.assets
            for (const key in obj) {
                // console.log(obj[key].source())
                if(key.endsWith(".js")) {
                    const content = obj[key].source()
                    const withoutComments = content.replace(/\/\*\*+\*\//g, "")
                    obj[key] = {
                        source: () => withoutComments,
                        size: () => withoutComments.length
                    }
                }
            }
        })
    }
}

module.exports = {
    mode: "none",
    entry: "./src/main.js",
    output: {
        filename: "bunder.js",
        path: path.join(__dirname, "dist"),
        // publicPath: "dist/"
    },
    devServer: {
        contentBase: "./public",
        proxy: {
            "/api": {
                target: "https://api.github.com",
                pathRewrite: {
                    "^/api": ""
                },
                // 代理主机是否是用本地地址，意思就是不能使用localhost:8080 作为请求github的主机名
                changeOrigin: true
            }
            
        }
    },
    devtool: "source-map",
    module: {
        rules: [
            {
                test: /.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            },
            {
                test: /.css$/,
                // 也可以使用模块路劲
                use: [
                    "style-loader",
                    "css-loader"
                ]
               
            },
            {
                test: /.png$/,
                use: {
                    loader: "url-loader",
                    options: {
                        limit: 1024 * 10 // 10KB
                    }
                }
            },
            {
                test: /\.(html)$/,
                use: {
                    loader: 'html-loader',
                    options: {
                        attributes: {
                            list: [
                                {
                                    tag: 'img',
                                    attribute: 'src',
                                    type: 'src',
                                },
                                {
                                    tag: 'a',
                                    attribute: 'href',
                                    type: 'src',
                                },
                            ]
                        }
                    }
                }
            }
        ] 
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: "HtmlWebpackPlugin 66666",
            meta: {
                viewport: 'width=device-width'
            },
            template: "./src/index.html"
        }),
        // new HtmlWebpackPlugin({
        //     filename: "about.html"
        // }),
        // 上线前执行一次, 开发环境不需要执行
        // new CopyWebpackPlugin({
        //     patterns: [
        //         "public"
        //     ]
        // }),
        // new MyPlugin()
    ]
}